<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>openresty demo</title>
    <style>
      .search {
        margin-bottom: 10px;
      }
      .search .input_username {
        height: 25px;
      }
      .search .input_search {
        height: 31px;
      }
      .table {
        width: 100%;
      }
      .table thead tr th {
        border-bottom: 1px solid rgb(214, 212, 212);
        height: 35px;
        text-align: left;
      }
      .table tbody tr td {
        border-bottom: 1px solid rgb(214, 212, 212);
        height: 35px;
      }
      .table tbody tr:last-child td{
        border-bottom: none;
      }
    </style>
    <script src="/html/js/jquery.min.js"></script>
    <script>
      $(function(){
        var search = function () {
          $.ajax({
            type: "GET",
            url: "/lua/user/search",
            data: {
              username:$("#username").val()
            },
            dataType: "json",
            success: function(data){
              $('#table tbody').empty();
              $.each(data, function(i, d){
                $('<tr/>')
                  .append('<td>'+d.login_name+'</td>')
                  .append('<td>'+d.nickname+'</td>')
                  .append('<td>'+(d.status == 0 ? '正常' : '冻结')+'</td>')
                  .append('<td>'+d.reg_time+'</td>')
                  .append('<td>'+(d.remark == null ? '' : d.remark)+'</td>')
                  .appendTo('#table tbody');
              });
            }
          });
        };
        $('#search').click(search);
        search();
      });
    </script>
  </head>
  <body>
    <h1>hello, openresty !</h1>
    <div class="search">
      <input id="username" class="input_username" name="username">
      <input id="search" class="input_search" type="button" value="search">
    </div>
    <table class="table" id="table" cellspacing="0">
      <thead>
        <tr>
          <th width="20%">username</th>
          <th width="20%">nickname</th>
          <th width="10%">status</th>
          <th width="20%">register time</th>
          <th>remark</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
</html>
